<script setup>
import {Delete, Edit, RefreshRight, SwitchButton} from '@element-plus/icons-vue'
import {getToken} from "@/utils/auth";
import {getCurrentInstance, onMounted, reactive, ref, watch} from 'vue'
import {ElMessage, ElMessageBox} from 'element-plus';
import {
  batchAddService,
  batchChangeService,
  batchListService,
  batchUpdateService,
  delBatchService
} from '@/api/stock/batch.js'
import {
  agreeProductApi,
  disagreeProductApi,
  getProductCompleteByBatchIdApi,
  getProductTodoByBatchIdApi
} from '@/api/todo/todo'

const {proxy} = getCurrentInstance();  //获取当前实例
// 搜索栏数据

const validModel = ref({
  a: '',
  b: '',
  c: ''
})

//定义函数，清空数据模型的数据
const validReset = () => {
  validModel.value = {
    a: '',
    dates: []
  }
}

// const validateC = (rule, value, callback) => {
//   if (Date.parse(value) < Date.parse(validModel.value.b)) {
//     callback(new Error('结束日期须大于开始日期'))
//   } else {
//     callback()
//   }
// }

// //搜索校验规则
// const validRules = reactive({
//   c: [
//     { validator: validateC, trigger: 'blur' },
//   ]
// })


//分页条数据模型
const pageNum = ref(1)//当前页
watch(pageNum, () => {
  loadData()
})
const total = ref(20)//总条数
const pageSize = ref(10)//每页条数

//当每页条数发生了变化，调用此函数
const onSizeChange = (size) => {
  pageSize.value = size;
  loadData();
}
//当前页码发生变化，调用此函数
const onCurrentChange = (num) => {
  pageNum.value = num;
  loadData();
}

const a = ref('')
const b = ref(null)
const c = ref(null)

// 列表数据模型
const tableData = ref([])
/** 获取列表数据  */
const loadData = async () => {
  console.log('请求数据', validModel.value.a)
  let params = {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
    a: validModel.value.a ? validModel.value.a : null,
    b: validModel.value.dates ? validModel.value.dates[0] : null,
    c: validModel.value.dates ? validModel.value.dates[1] : null
  }
  // console.log('a',validModel.value.a ? validModel.value.a : null)
  let result = await batchListService(params);
  //渲染视图
  console.log('aaa', result.data.items)
  total.value = result.data.total;
  tableData.value = result.data.items;
}

/** 搜索按钮 */
function submitValid() {
  proxy.$refs["validRef"].validate(valid => {
    if (valid) {
      loadData();
    }
  })
};

onMounted(() => {
  loadData();
})

// 单选/多选判断
const single = ref(true);
const multiple = ref(true);

const ids = ref([]);

/** 选择条数  */
function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.id);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
  console.log("选择",ids)
};


/** 删除按钮操作 */
function handleDelete(row) {
  //点击行内的删除按钮时，row就有值
  const userIds = row.id || ids.value;
  proxy.$modal.confirm('确认删除？').then(function () {
    return delBatchService(userIds);
  }).then(() => {
    loadData();
    proxy.$modal.msgSuccess("删除成功");
  }).catch(() => {
  });
};

// 新增/删除数据模型
const editModel = ref({
  name: '',
  startTime: '',
  endTime: '',
  budget: ''
})

//定义函数，清空数据模型的数据
const reset = () => {
  editModel.value = {
    name: '',
    startTime: '',
    endTime: '',
    budget: ''
  }
}

// 新增/编辑标题
const title = ref('')

// 新增/编辑标题
const dialogVisible = ref(false)

// 展示新增/编辑标题（标签中修改值不需要.value，函数中需要加.value）
const showDialog = (row) => {
  reset()
  dialogVisible.value = true;
  title.value = '编辑批次';
  //   console.log('row ',row.supplier)
  // 对ref对象的属性赋值
  editModel.value.name = row.name;
  editModel.value.startTime = row.startTime;
  editModel.value.endTime = row.endTime;
  editModel.value.budget = row.budget;
  //   console.log('model ',editModel.value.supplier)
  //扩展id属性，将来需要传递给后台，不需要定义
  editModel.value.id = row.id
}

// 表单验证
const validateTime = (rule, value, callback) => {
  if (value < editModel.value.startTime) {
    callback(new Error('最高价不能低于最低价'))
  } else {
    callback()
  }
}

const editRules = reactive({
  name: [
    {required: true, message: '请输入批次号', trigger: 'blur'},
  ],
  startTime: [
    {required: true, message: '请输入开始时间', trigger: 'blur'},
  ],
  endTime: [
  {required: true, message: '请输入开始时间', trigger: 'blur'},
    {message: '请输入结束时间', validator: validateTime, trigger: 'blur'},
  ]
})


/** 提交按钮 */
function submitForm() {
  proxy.$refs["addRef"].validate(valid => {
    if (valid) {
      // id != undefined标明有选中行，为新增，否则为修改
      if (editModel.value.id != undefined) {
        batchUpdateService(editModel.value).then(response => {
          proxy.$modal.msgSuccess("修改成功");
          dialogVisible.value = false;
          loadData();
        });
      } else {
        batchAddService(editModel.value).then(response => {
          proxy.$modal.msgSuccess("新增成功");
          dialogVisible.value = false;
          loadData();
        });
      }
    }
  });
};

// 搜索栏
const isExpand = ref(false)

// 文件上传（导入）

/*** 用户导入参数 */
const upload = reactive({
  // 是否显示弹出层（用户导入）
  open: false,
  // 弹出层标题（用户导入）
  title: "",
  // 是否禁用上传
  isUploading: false,
  // 是否更新已经存在的用户数据
  updateSupport: 0,
  // 设置上传的请求头部
  headers: {Authorization: "Bearer " + getToken()},
  // 上传的地址
  url: "http://localhost:8080/batch/import"
});
/**文件上传中处理 */
const handleFileUploadProgress = (event, file, fileList) => {
  upload.isUploading = true;
};

/** 文件上传成功处理 */
const handleFileSuccess = (response, file, fileList) => {
  console.log('成功')
  upload.open = false;
  upload.isUploading = false;
  proxy.$refs["uploadRef"].handleRemove(file);
  proxy.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", {dangerouslyUseHTMLString: true});
  loadData();
};

/** 提交上传文件 */
function submitFileForm() {
  proxy.$refs["uploadRef"].submit();
};

/** 导入按钮操作 */
function handleImport() {
  upload.title = "用户导入";
  upload.open = true;
};

// 导出
/** 导出按钮操作 */
// function handleExport() {
//   location.href = "/batch/export"
// };

/** 导出按钮操作 */
const handleExport = async () => {

  proxy.download("/batch/export", {}, `批次_${new Date().getTime()}.xlsx`);

}


//回收站
const visibleDrawer = ref(false)

// 提前终止/恢复
const change = (row) => {
  //展示确认框
  ElMessageBox.confirm(
      '确认变更状态？',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(async () => {
        //调用接口
        let result = await batchChangeService(row.id)
        ElMessage({
          type: 'success',
          message: '变更成功',
        })
        //刷新页面（调用获取所有文章的函数）
        loadData();
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '取消删除',
        })
      })
}

const applyTodoList = ref([])
const applyTodotitle = ref('')
const applyTodoVisible = ref(false)

const applyCompleteList = ref([])
const applyCompletetitle = ref('')
const applyCompleteVisible = ref(false)
const chosenBatchId = ref()

//请求 查询接口
const applyProductTodo = async (batchId) => {
  chosenBatchId.value = batchId;
  const r = await getProductTodoByBatchIdApi({id: batchId});
  applyTodoList.value = r.data;
  applyTodoVisible.value = true;
  applyTodotitle.value = '待审核购买申请';
  console.log(applyTodoList.value)
}

//请求 查询接口
const applyProductComplete = async (batchId) => {
  chosenBatchId.value = batchId;
  const r = await getProductCompleteByBatchIdApi({id: batchId});
  applyCompleteList.value = r.data;
  applyCompleteVisible.value = true;
  applyCompletetitle.value = '已审核购买申请';
  console.log(applyCompleteList.value)
}

const onAgree = async (row) => {
  const r = await agreeProductApi({ id: [row.id] });
  if (r.code == 200) {
    ElMessage.success("通过审核！")
    // 获取 batchId
    const batchId = row.batchId;
    // 重新加载数据
    const reloadDataTodo = await getProductTodoByBatchIdApi({id: batchId});
    const reloadDataComplete = await getProductCompleteByBatchIdApi({id: batchId});
    applyTodoList.value = reloadDataTodo.data;
    applyCompleteList.value = reloadDataComplete.data;
    loadData()
  } else {
    ElMessage.error(r.data)
  }
}

// 驳回申请
const onDisagree = (row) => {
    ElMessageBox.confirm('确定驳回该条申请吗?', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(async () => {
        console.log("delete",row.id)
        //请求接口 删除数据
        let r = await disagreeProductApi({ id: [row.id] })
        if (r.code == 200) {
            ElMessage({ type: 'success', message: '驳回成功' })
            // 获取 batchId
            const batchId = row.batchId;
            // 重新加载数据
            const reloadDataTodo = await getProductTodoByBatchIdApi({ id: batchId });
            const reloadDataComplete = await getProductCompleteByBatchIdApi({ id: batchId });
            applyTodoList.value = reloadDataTodo.data;
            applyCompleteList.value = reloadDataComplete.data;
            loadData()
        } else {
            ElMessage({ type: 'info', message: r.data })
        }
    }).catch(() => {
        ElMessage({
            type: 'info', message: '驳回失败'
        })
    })
}
// 批量选择 获取
let dialogIds = ref([])
const onSelectionChange = (val) => {
  dialogIds.value = val
}

const onDisagreeBatch = () => {
    ElMessageBox.confirm('确定驳回这些请求吗?', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(async () => {
        //请求接口
        if (dialogIds.value.length > 0) {
            var data=new Array();
            for (let i = 0; i < dialogIds.value.length; i++) {
            data[i]=dialogIds.value[i].id;
             }
            console.log("111",data)
            let r = await disagreeProductApi({ id:data })
            if (r.code == 200) {
                ElMessage({ type: 'success', message: '驳回成功' })
                // 重新加载数据
                const reloadDataTodo = await getProductTodoByBatchIdApi({ id: chosenBatchId.value });
                const reloadDataComplete = await getProductCompleteByBatchIdApi({ id: chosenBatchId.value });
                applyTodoList.value = reloadDataTodo.data;
                applyCompleteList.value = reloadDataComplete.data;
                loadData()
            } else {
                ElMessage({ type: 'info', message: r.data })
            }
        }
    }).catch(() => {
        ElMessage({
            type: 'info', message: '驳回失败'
        })
    })
}

const onAgreeBatch = () => {
    ElMessageBox.confirm('确定通过这些请求吗?', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(async () => {
        //请求接口
        if (dialogIds.value.length > 0) {
            var data=new Array();
            for (let i = 0; i < dialogIds.value.length; i++) {
            data[i]=dialogIds.value[i].id;
             }
            console.log("111",data)
            let r = await agreeProductApi({ id: data })
            if (r.code == 200) {
                ElMessage({ type: 'success', message: '通过成功' })
                // 重新加载数据
                const reloadDataTodo = await getProductTodoByBatchIdApi({ id: chosenBatchId.value});
                const reloadDataComplete = await getProductCompleteByBatchIdApi({ id: chosenBatchId.value });
                applyTodoList.value = reloadDataTodo.data;
                applyCompleteList.value = reloadDataComplete.data;
                loadData()
            } else {
                ElMessage({ type: 'info', message: r.data })
            }
        }
    }).catch(() => {
        ElMessage({
            type: 'info', message: '通过失败'
        })
    })
}
const checkSelectable = (row, index)=> {
      /**
        * row：当前行数据
        * index：当前第几位
      */ 
      let flag = true
      for (let i = 0; i < applyCompleteList.value.length; i++) {
        if (row.flag == 1) { 
          flag = false
        } else {
          flag = true
        }
      }
      return flag
}

</script>
<template>
  <el-card class="page-container">


    <!-- 筛选 -->
    <el-form ref="validRef" :model="validModel" :rules="validRules" inline>
      <el-form-item label="批次名称" prop="a">
        <el-input v-model="validModel.a" placeholder="请输入批次名称"/>
      </el-form-item>
      <el-form-item label="日期选择">
        <el-date-picker
            v-model="validModel.dates"
            end-placeholder="结束日期"
            range-separator="--"
            start-placeholder="开始日期"
            type="daterange"
            value-format="YYYY-MM-DD"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitValid()"><span class="iconfont icon-sousuo"></span>搜索</el-button>
        <el-button type="default" @click="validReset()"> 重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 按钮组 -->
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button icon="Plus" plain type="primary"
                   @click="dialogVisible = true; title = '添加批次'; reset()">新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button :disabled="multiple" icon="Delete" plain type="danger" @click="handleDelete">删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button icon="Upload" plain type="info" @click="handleImport">导入</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button icon="Download" plain type="warning" @click="handleExport">导出</el-button>
      </el-col>

    </el-row>
    <!-- 按钮组 -->
    <!-- 表格 -->
    <el-table :border="true" :data="tableData" @selection-change="handleSelectionChange">
      <el-table-column align="center" fixed="left" type="selection"></el-table-column>
      <el-table-column align="center" label="序号" type="index" width="60">
        <!-- 序号重新计算 -->
        <template #default="scope">
          <span>{{ (pageNum - 1) * pageSize + scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="批次号" prop="name"></el-table-column>
      <el-table-column align="center" label="开始时间" prop="startTime"></el-table-column>
      <!--      <el-table-column label="结束时间" prop="endTime" align="center"></el-table-column>-->
      <el-table-column align="center" label="结束时间" prop="endTime"></el-table-column>
      <el-table-column align="center" label="总预算" prop="budget"></el-table-column>
      <el-table-column align="center" label="可申请预算" prop="balance"></el-table-column>
      <el-table-column align="center" label="已处理">
        <template #default="{ row }">
          <el-button link size="small" type="primary" @click="applyProductComplete(row.id)">
            处理详情
          </el-button>
        </template>
      </el-table-column>
      <el-table-column align="center" label="待处理">
        <template #default="{ row }">
          <el-button v-if="row.checkFlag === 1" link size="small" type="danger" @click="applyProductTodo(row.id)">
            有待处理申请
          </el-button>
          <el-button v-else disabled link size="small">
            无申请
          </el-button>
        </template>
      </el-table-column>
      <el-table-column align="center" label="申请状态">
        <template #default="{ row }">
          <div v-if="row.state === 1" :style="{ color: 'green',fontSize: '12px' }">
            可申请
          </div>
          <div v-else :style="{ fontSize: '12px' }">
            不可申请
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" fixed="right" label="操作" width="130">
        <template #default="{ row }">
          <el-button :icon="Edit" link size="small" type="primary" @click="showDialog(row)">
            <span class="iconfont icon-bianji"></span>修改
          </el-button>
          <el-button :icon="Delete" link size="small" type="primary" @click="handleDelete(row)">
            <span class="iconfont icon-shanchu"></span>删除
          </el-button>
          <el-button v-if="row.state === 1" :icon="SwitchButton" link size="small" type="danger" @click="change(row)">
            <span class="iconfont icon-shanchu"></span>提前终止
          </el-button>
          <el-button v-if="row.rstate === 1" :icon="RefreshRight" link size="small" type="success" @click="change(row)">
            <span class="iconfont icon-shanchu"></span>申请恢复
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 表格 -->
    <!-- 分页 -->
    <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[5, 10, 15]"
                   :total="total" background layout="jumper, total, sizes, prev, pager, next"
                   style="margin-top: 20px; justify-content: flex-end"
                   @size-change="onSizeChange" @current-change="onCurrentChange"/>
    <!-- 分页 -->

    <!-- 添加/编辑菜单 -->
    <el-dialog v-model="dialogVisible" :title="title" width="30%">
      <el-form ref="addRef" :model="editModel" :rules="editRules" label-width="100px" style="padding-right: 30px">
        <el-form-item label="批次号" prop="name">
          <el-input v-model="editModel.name"></el-input>
        </el-form-item>
        <el-form-item label="开始时间" prop="startTime">
          <el-date-picker v-model="editModel.startTime" placeholder="请输入开始时间" type="date"
                          value-format="YYYY-MM-DD"/>
        </el-form-item>
        <el-form-item label="结束时间" prop="endTime">
          <el-date-picker v-model="editModel.endTime" placeholder="请输入结束时间" type="date"
                          value-format="YYYY-MM-DD"/>
        </el-form-item>
        <el-form-item label="总预算" prop="budget">
          <el-input v-model="editModel.budget"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitForm()"> 确认
          </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 导入框 -->
    <el-dialog v-model="upload.open" :title="upload.title" append-to-body width="400px">
      <el-upload ref="uploadRef" :action="upload.url" :auto-upload="false" :disabled="upload.isUploading" :headers="upload.headers"
                 :limit="1" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess"
                 accept=".xlsx, .xls" drag>
        <el-icon class="el-icon--upload">
          <upload-filled/>
        </el-icon>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <template #tip>
          <div class="el-upload__tip text-center">
            <span>仅允许导入xls、xlsx格式文件。</span>
          </div>
        </template>
      </el-upload>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitFileForm">确 定</el-button>
          <el-button @click="upload.open = false">取 消</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 回收站抽屉 -->
    <el-drawer v-model="visibleDrawer" direction="rtl" size="50%" title="回收站">
      <div style="margin-bottom: 8px">
        <el-button :disabled="multiple" icon="Delete" plain type="danger" @click="handleDelete">彻底删除</el-button>
      </div>
      <el-table :border="true" :data="tableData" @selection-change="handleSelectionChange">
        <el-table-column align="center" fixed="left" type="selection"></el-table-column>
        <el-table-column align="center" label="序号" type="index" width="60">
          <!-- 序号重新计算 -->
          <template #default="scope">
            <span>{{ (pageNum - 1) * pageSize + scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="商品名称" prop="name"></el-table-column>
        <el-table-column align="center" label="供应商" prop="supplier"></el-table-column>
        <el-table-column align="center" label="单价" prop="price"></el-table-column>
        <el-table-column align="center" label="图例" prop="imgUrl"></el-table-column>
        <el-table-column align="center" label="到期时间" prop="expireTime"></el-table-column>
        <el-table-column align="center" fixed="right" label="操作" width="100">
          <template #default="{ row }">
            <el-button :icon="Delete" link size="small" type="primary" @click="handleDelete(row)">
              <span class="iconfont icon-shanchu"></span>彻底删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-drawer>

  </el-card>


      <!-- 待处理菜单 -->
      <el-dialog v-model="applyTodoVisible" :title="applyTodotitle" width="80%">
        <el-row :gutter="10" class="mb8">
         <el-col :span="1.5">
                <el-button type="primary" :disabled="dialogIds.length === 0" @click="onAgreeBatch">
                  <span class="iconfont icon-jiahao"></span>批量通过
                </el-button>
                <el-button type="danger" :disabled="dialogIds.length === 0" @click="onDisagreeBatch">
                  <span class="iconfont icon-shanchu"></span>批量驳回
                </el-button>
            </el-col>
        </el-row>
        <el-table :data="applyTodoList" :border="true"  @selection-change="onSelectionChange">
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column :show-overflow-tooltip="true" align="center" label="序号">
            <!-- 序号重新计算 -->
            <template #default="scope">
              <span>{{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <!-- <el-table-column :show-overflow-tooltip="true" align="center" label="申请批次" prop="batchName"/> -->
          <el-table-column :show-overflow-tooltip="true" align="center" label="申请物品" prop="productsName"/>
          <el-table-column :show-overflow-tooltip="true" align="center" label="申请数量" prop="amount"/>
          <el-table-column :show-overflow-tooltip="true" align="center" label="申请金额" prop="price"/>
          <el-table-column :show-overflow-tooltip="true" align="center" label="申请人员" prop="applicantName"/>
          <el-table-column :show-overflow-tooltip="true" align="center" label="申请原因" prop="reason"/>
          <el-table-column :show-overflow-tooltip="true" align="center" label="申请时间" prop="createTime"/>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
              <template #default="{ row }">
                  <el-tooltip content="通过" placement="top">
                    <el-button link type="primary" icon="CircleCheck" @click="onAgree(row)"></el-button>
                  </el-tooltip>
                  <el-tooltip content="驳回" placement="top">
                    <el-button link type="primary" icon="Delete" @click="onDisagree(row)"></el-button>
                  </el-tooltip>
                </template>
            </el-table-column>
        </el-table>
        <!-- 表格 -->
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="applyTodoVisible = false">取消</el-button>
        </span>
    </template>
  </el-dialog>

    <!-- 已处理 -->
    <el-dialog v-model="applyCompleteVisible" :title="applyCompletetitle" width="80%">
      <el-row :gutter="10" class="mb8">
         <el-col :span="1.5">
                <el-button type="primary" :disabled="dialogIds.length === 0" @click="onAgreeBatch">
                  <span class="iconfont icon-jiahao"></span>批量通过
                </el-button>
            </el-col>
        </el-row>
        <el-table :data="applyCompleteList" :border="true" @selection-change="onSelectionChange">
          <el-table-column type="selection" :selectable="checkSelectable" width="55" align="center" />
          <el-table-column :show-overflow-tooltip="true" align="center" label="序号">
            <!-- 序号重新计算 -->
            <template #default="scope">
              <span>{{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <!-- <el-table-column align="center" label="序号" prop="id"/> -->
          <!-- <el-table-column :show-overflow-tooltip="true" align="center" label="申请批次" prop="batchName"/> -->
          <el-table-column :show-overflow-tooltip="true" align="center" label="申请物品" prop="productsName"/>
          <el-table-column :show-overflow-tooltip="true" align="center" label="申请数量" prop="amount"/>
          <el-table-column :show-overflow-tooltip="true" align="center" label="申请金额" prop="price"/>
          <el-table-column :show-overflow-tooltip="true" align="center" label="申请人员" prop="applicantName"/>
          <el-table-column :show-overflow-tooltip="true" align="center" label="申请原因" prop="reason"/>
          <el-table-column :show-overflow-tooltip="true" align="center" label="申请时间" prop="createTime"/>
          <el-table-column :show-overflow-tooltip="true" align="center" label="申请状态">
            <template #default="{ row }">
              <span v-if="row.flag === 1">已通过</span>
              <span v-else>已驳回</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template #default="{ row }">
                <!-- <el-button link type="primary"  v-if="row.flag === 1" @click="onDisagree(row)">驳回</el-button> -->
                <el-button link type="primary"  v-if="row.flag === 0" @click="onAgree(row)">通过</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 表格 -->
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="applyCompleteVisible = false">取消</el-button>
        </span>
    </template>
  </el-dialog>

</template>
<style lang="scss" scoped>
.page-container {
  min-height: 100%;
  box-sizing: border-box;

  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .mb8 {
    margin-bottom: 8px;
  }
}
</style>